<template>
	<view>
		<navbar title="我的钱包"></navbar>
		<view class="main pr">
			<view class="wallet-box pr">
				<image class="walletbg" src="https://youlinapi.zhihui361.com/image/wx/walletbg.png" mode=""></image>
				<view class="wallet-inner pr flex fdc jcsb">
					<view>
						<view class="balance fz30 fwb">账户余额(￥)</view>
						<view class="money fa">
							<view>￥</view>
							<view class="num">{{balance}}</view>
						</view>
					</view>
					<view class="fa jcsb">
						<view>
							<view class="fwb clf">提现中金额：￥{{withdrawSum}}</view>
							<view class="view-record fa" @click="utils.navTo('/pages/mine/withdraw_record')">
								<view>查看提现记录</view>
								<image class="right-icon" src="../../static/right2.png" mode=""></image>
							</view>
						</view>
						<view class="withdraw" @click="utils.navTo('/pages/mine/withdraw')">提现</view>
					</view>
				</view>
			</view>
			<view class="bill-wrapper">
				<view class="bill-title fa jcsb">
					<view class="name">账户明细</view>
				</view>
				<view class="bill-box">
					<view class="bill-list" v-for="(item, index) in list" :key="index">
						<view class="fa jcsb">
							<view>{{item.title}}</view>
							<view>{{item.money}}</view>
						</view>
						<view class="date fa jcsb">
							<view v-if="item.message">{{item.message}}</view>
							<view v-else></view>
							<view>{{item.createTime}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fixed-bottombar">
			<view class="bottombar-box fa jcc">
				<view class="recharge-btn" @click="utils.navTo('/pages/mine/recharge')">充值</view>
			</view>
			<view class="fixed-place"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				count: 0,
				list: [],
				opacity: 0,
				balance: 0,
				withdrawSum: 0
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.getUserinfo()
			this.getWalletSum()
			this.page = 1
			this.count = 0
			this.list = []
			this.getList()
		},
		onReachBottom() {
			if(this.list.length < this.count) {
				this.page++
				this.getList()
			}
		},
		onPageScroll(e) {
			this.opacity = this.utils.opacityCompute(e.scrollTop)
		},
		methods: {
			getUserinfo() {
				this.api.userinfoFunc().then(res => {
					this.balance = res.data.balance
				})
			},
			getWalletSum() {
				this.api.withdrawSumFunc().then(res => {
					if(res.code == 200) {
						this.withdrawSum = res.data
					}
				})
			},
			getList() {
				this.api.balanceHistoryFunc().then(res => {
					if(res.code == 200) {
						this.page = res.total
						this.list = this.page == 1 ? res.rows : this.list.concat(res.rows)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		padding-top: 20rpx; 
		padding-bottom: 20rpx;
	}
	.wallet-box{
		margin: 0 24rpx 0;
		width: 702rpx;
		height: 396rpx;
		.walletbg{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 702rpx;
			height: 396rpx;
		}
		.wallet-inner{
			padding: 86rpx 44rpx 32rpx;
			height: 396rpx;
			box-sizing: border-box;
			.balance{
				line-height: 40rpx;
			}
			.money{
				font-size: 36rpx;
				font-weight: bold;
				line-height: 42rpx;
				.num{
					font-size: 60rpx;
					line-height: 70rpx;
				}
			}
			.view-record{
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #fff;
				.right-icon{
					width: 24rpx;
					height: 24rpx;
				}
			}
			.withdraw{
				width: 152rpx;
				height: 64rpx;
				line-height: 64rpx;
				border: 1rpx solid #fff;
				border-radius: 12rpx;
				text-align: center;
				font-size: 30rpx;
				color: #fff;
			}
		}
	}
	.bill-wrapper{
		margin: 16rpx 24rpx;
		border-radius: 10rpx;
		background-color: #fff;
		.bill-title{
			padding: 28rpx 24rpx;
			.name{
				position: relative;
				padding-left: 28rpx;
				font-size: 34rpx;
				font-weight: bold;
				&::before{
					content: '';
					position: absolute;
					top: 50%;
					left: 0;
					transform: translateY(-50%);
					width: 8rpx;
					height: 40rpx;
					border-radius: 4rpx;
					background-color: var(--theme);
				}
			}
			.right-icon{
				width: 28rpx;
				height: 28rpx;
			}
		}
		.bill-box{
			padding: 0 24rpx;
			.bill-list{
				padding: 24rpx 0;
				border-bottom: 2rpx solid #eee;
				&:last-child{
					border-bottom: none;
				}
				.date{
					margin-top: 6rpx;
					font-size: 22rpx;
					line-height: 40rpx;
					color: #aaa;
				}
			}
		}
	}
	.fixed-bottombar{
		.bottombar-box{
			z-index: 98;
			position: fixed;
			bottom: 0;
			bottom: env(safe-area-inset-bottom);
			left: 0;
			right: 0;
			padding: 0 24rpx;
			height: 120rpx;
			background-color: #fff;
			z-index: 999;
			.recharge-btn{
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 44px;
				font-size: 32rpx;
				font-weight: bold;
				text-align: center;
				color: #fff;
				background: linear-gradient( 270deg, #6CE083 0%, #3DBF63 100%);
			}
		}
		.fixed-place{
			height: 120rpx;
		}
	}
</style>
